<template>
	<view class="change-pwd-container">
		<view class="header">
			<text class="title">修改密码</text>
		</view>
		
		<!-- 密码表单 -->
		<view class="password-form">
			<view class="form-item">
				<text class="label">当前密码</text>
				<input 
					type="password" 
					v-model="passwordForm.oldPassword" 
					placeholder="请输入当前密码" 
					password
				/>
			</view>
			
			<view class="form-item">
				<text class="label">新密码</text>
				<input 
					type="password" 
					v-model="passwordForm.newPassword" 
					placeholder="请输入新密码" 
					password
				/>
			</view>
			
			<view class="form-item">
				<text class="label">确认密码</text>
				<input 
					type="password" 
					v-model="passwordForm.confirmPassword" 
					placeholder="请再次输入新密码" 
					password
				/>
			</view>
		</view>
		
		<!-- 密码规则提示 -->
		<view class="password-tips">
			<text class="tips-title">密码规则：</text>
			<text class="tips-item">- 密码长度为6-20位</text>
			<text class="tips-item">- 包含字母、数字、符号中的至少两种</text>
		</view>
		
		<!-- 提交按钮 -->
		<view class="btn-wrapper">
			<button class="save-btn" @click="submitChange">确认修改</button>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth.js';
	
	export default {
		data() {
			return {
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			}
		},
		methods: {
			// 验证密码规则
			validatePassword(password) {
				if (password.length < 6 || password.length > 20) {
					return false;
				}
				
				let typeCount = 0;
				if (/[a-zA-Z]/.test(password)) typeCount++;
				if (/[0-9]/.test(password)) typeCount++;
				if (/[^a-zA-Z0-9]/.test(password)) typeCount++;
				
				return typeCount >= 2;
			},
			
			// 提交修改密码
			submitChange() {
				// 表单验证
				if (!this.passwordForm.oldPassword) {
					uni.showToast({
						title: '请输入当前密码',
						icon: 'none'
					});
					return;
				}
				
				if (!this.passwordForm.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return;
				}
				
				if (!this.validatePassword(this.passwordForm.newPassword)) {
					uni.showToast({
						title: '新密码不符合规则',
						icon: 'none'
					});
					return;
				}
				
				if (this.passwordForm.newPassword === this.passwordForm.oldPassword) {
					uni.showToast({
						title: '新密码不能与当前密码相同',
						icon: 'none'
					});
					return;
				}
				
				if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				
				// 调用修改密码API
				this.changePassword();
			},
			
			// 调用修改密码API
			async changePassword() {
				try {
					uni.showLoading({
						title: '提交中...'
					});
					
					// 实际项目中，这里应该调用API修改密码
					// const res = await userApi.changePassword({
					//   oldPassword: this.passwordForm.oldPassword,
					//   newPassword: this.passwordForm.newPassword
					// });
					
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1500));
					
					// 模拟成功
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});
					
					// 清空表单
					this.passwordForm = {
						oldPassword: '',
						newPassword: '',
						confirmPassword: ''
					};
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					
				} catch (e) {
					console.error('修改密码失败', e);
					
					// 错误处理
					uni.showToast({
						title: e.message || '修改密码失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss">
.change-pwd-container {
	padding: 20rpx;
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	padding: 20rpx 0;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.password-form {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			width: 150rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		input {
			flex: 1;
			height: 60rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
}

.password-tips {
	margin-top: 30rpx;
	padding: 20rpx;
	
	.tips-title {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.tips-item {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 5rpx;
		padding-left: 10rpx;
	}
}

.btn-wrapper {
	margin-top: 60rpx;
	padding: 0 20rpx;
	
	.save-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FF5151;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
}
</style> 